<template>
    <div>
        <el-container>
            <el-header>
                <el-row>
                    <el-col :span="3" style="margin-top: 5px">
                        当前所选择的模块：
                    </el-col>
                    <el-col :span="4">
                        <el-select v-model="subsyetmChooseValue" filterable placeholder="请选择"
                                   @change="reflash(nowPage)" style="width: 100%;">
                            <el-option v-for="item in options" :key="item.key"
                                       :label="item.label" :value="item.key">
                                <span style="float: left">{{ item.key }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-col>
                    <el-col :span="2" style="float: left">
                        <el-button-group>
                            <el-tooltip class="item" effect="dark" content="添加商品"
                                        @click="formComponentVisble = true" placement="top-start">
                                <el-button type="primary" icon="el-icon-plus" @click="addButtonFunc"></el-button>
                            </el-tooltip>
                        </el-button-group>
                    </el-col>
                </el-row>
            </el-header>
            <el-main>
                <el-table :data="tableData" border style="width: 100%">
                    <el-table-column label="商品图片" width="250">
                        <template slot-scope="scope">
                            <el-image style="width: 100px; height: 100px" :src="scope.row.path" fit="contain"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column prop="coName" label="商品名称" width="200" align="center"></el-table-column>
                    <el-table-column prop="amount" label="库存数量" width="250" align="center"></el-table-column>
                    <el-table-column prop="activityId" label="参与的活动" width="200" align="center"></el-table-column>
                    <el-table-column prop="price" label="商品单价" width="200" align="center"></el-table-column>
                    <el-table-column label="基本操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button-group>
                                <el-tooltip class="item" effect="dark" content="编辑" placement="top-start">
                                    <el-button type="primary" icon="el-icon-s-order"
                                               @click="editButtonFunc(scope.$index, scope.row)"/>
                                </el-tooltip>
                                <el-tooltip class="item" effect="dark" content="删除" placement="top-end">
                                    <el-button type="danger" icon="el-icon-close"
                                               @click="handleDelete(scope.$index, scope.row)"></el-button>
                                </el-tooltip>
                            </el-button-group>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block" style="margin-top: 15px">
                    <el-pagination
                            :hide-on-single-page="true"
                            @current-change="handleCurrentChange"
                            :current-page.sync="nowPage"
                            :page-size="pageSize"
                            layout="prev, pager, next, jumper"
                            :total="formTotal">
                    </el-pagination>
                </div>
            </el-main>
        </el-container>
        <el-dialog title="添加商品" :visible.sync="AddWindowVisible"  width="50%">
            <AddCommodity v-bind:subsystemCode="subsyetmChooseValue" v-bind:AddWindowVisible="AddWindowVisible"
                          v-on:watchingCloseVisble="waitingChangeOfAdd"></AddCommodity>
        </el-dialog>
        <el-dialog title="修改库存" :visible.sync="EditWindowVisible"  width="30%">
            <EditCommodity v-bind:data="EditWindowData" v-bind:EditWindowVisible="EditWindowVisible"
                           :subsyetmChooseValue="subsyetmChooseValue"
                           v-on:watchingEditCloseVisble="waitingChangeOfEdit"></EditCommodity>
        </el-dialog>
    </div>
</template>

<script>
    import AddCommodity from "./AddCommodity"
    import EditCommodity from "./EditCommodity"
    export default {
        name: "index",
        components:{
            AddCommodity,
            EditCommodity
        },
        data(){
            return {
                // 当前所使用的用户名
                userName: '',
                // 表格的数据
                tableData: [] ,
                // 添加弹窗的显示标识符
                AddWindowVisible: false,
                // 编辑弹窗的显示标识符
                EditWindowVisible: false,
                // 用于传给修改弹窗的数据
                EditWindowData: {},
                // 头部列表的数据
                options: [],
                // 记录子系统所选的值
                subsyetmChooseValue: '',
                // 用于记录当前是第几页
                nowPage: 1,
                // 表格一页的数量
                pageSize: 0,
                // 表格内容的总数
                formTotal: 0,
            }
        },
        methods:{
            // 监听新建操作对应的标识符监听
            waitingChangeOfAdd: function (status) {
                this.AddWindowVisible = status;
                this.reflash(this.nowPage);
            },
            // 监听编辑操作对应的标识符监听
            waitingChangeOfEdit: function (status) {
                this.EditWindowVisible = status;
                this.reflash(this.nowPage);
            },
            // 添加商品按钮的功能
            addButtonFunc: function () {
                if(this.subsyetmChooseValue === ""){
                    this.$message.error("请选择所需要的终端");
                    return;
                }
                this.AddWindowVisible = true;
            },
            // 查找对应账户的子服务器列表
            subsystemObtain: function () {
                let win = this;
                let form = new FormData;
                form.append("serve-account", this.userName);
                this.$http.post("/api/subsystem/obtain/stock", form).then(function (response) {
                    win.options = response.data;
                })
            },
            // 	nowPage 改变时会触发
            handleCurrentChange(val) {
                this.reflash(this.nowPage);
            },
            // 刷新商品库存列表
            reflash: function(nextPage){
                let win = this;
                let form = new FormData;
                form.append("server_code", this.subsyetmChooseValue);
                form.append("next_page", nextPage);

                this.$http.post("/api/stock/obtain", form).then(function (response) {
                    if(response.data !== "" && response.data !== null){
                        win.tableData = response.data;
                        win.formTotal = response.data[0].count;
                        win.pageSize = response.data[0].pageMaxNum
                    } else{
                        // 在查找失败后，重置查找的表单
                        win.errorRestore(win);
                    }
                })
            },
            // 查找错误跳转处理
            errorRestore(win){
                win.pageSize = 0;
                win.formTotal = 0;
                win.$message.warning("未找到相关元素");
                win.nowPage = 0;
            },
            // 编辑商品库存的按钮的功能
            editButtonFunc: function (index, row) {

                this.EditWindowData = row;
                this.EditWindowVisible = true;
            },
            // 表单中的删除按钮
            handleDelete(index, row) {
                let form = new FormData;
                // alert(index + " " + row.coId);
                form.append("server_code", this.subsyetmChooseValue);
                form.append("delete", row.coId);
                let win = this;
                this.$http.post("/api/stock/delete", form).then(function(response){
                    if(response.data){
                        win.reflash(win.nowPage);
                        win.$message.success("删除成功");
                    } else{
                        // 在查找失败后，重置查找的表单
                        win.reflash(win.nowPage);
                        win.$message.error("删除失败");
                    }
                });
            }
        },
        mounted() {
            this.subsystemObtain();
            this.reflash(this.nowPage);
        },
        beforeMount() {
            this.userName = JSON.parse(window.sessionStorage.getItem("user")).userName;
        }
    }
</script>

<style scoped>

</style>
